<template>
  <div style='margin-top: -20px'>
    <el-row style='padding: 0 20px' :gutter='80'>
      <el-col :span='6'>
        <el-card style='background: none;border: 1px solid #8C8C8C; border-radius: 10px' shadow="never">
          <el-row>
            <el-col :span='8' style='display: flex;justify-content: center'>
              <i class='el-icon-user-solid' style='color: forestgreen;font-size: 50px;margin-top: 5px'></i>
            </el-col>
            <el-col :span='16' style='text-align: center'>
              <p style='color: #414040;font-weight: 700'>在线用户</p>
              <p>&nbsp;</p>
              <p>1</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span='6'>
        <el-card style='background: none;border: 1px solid #8C8C8C; border-radius: 10px' shadow="never">
          <el-row>
            <el-col :span='8' style='display: flex;justify-content: center'>
              <i class='el-icon-tickets' style='color: red;font-size: 50px;margin-top: 5px'></i>
            </el-col>
            <el-col :span='16' style='text-align: center'>
              <p style='color: #414040;font-weight: 700'>题库总数</p>
              <p>&nbsp;</p>
              <p>{{ paginationage.total }}</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span='6'>
        <el-card style='background: none;border: 1px solid #8C8C8C; border-radius: 10px' shadow="never">
          <el-row>
            <el-col :span='8' style='display: flex;justify-content: center'>
              <i class='el-icon-pear' style='color: orange;font-size: 50px;margin-top: 5px'></i>
            </el-col>
            <el-col :span='16' style='text-align: center'>
              <p style='color: #414040;font-weight: 700'>学生总数</p>
              <p>&nbsp;</p>
              <p>{{ paginations.total }}</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span='6'>
        <el-card style='background: none;border: 1px solid #8C8C8C; border-radius: 10px' shadow="never">
          <el-row>
            <el-col :span='8' style='display: flex;justify-content: center'>
              <i class='el-icon-cherry' style='color: pink;font-size: 50px;margin-top: 5px'></i>
            </el-col>
            <el-col :span='16' style='text-align: center'>
              <p style='color: #414040;font-weight: 700'>教师总数</p>
              <p>&nbsp;</p>
              <p>{{ pagination.total }}</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div id='main' style='width: 900px;height: 450px; margin: 20px auto 0 auto;'></div>
    <!--    <section class="index">-->
    <!--      <div class="hello">-->
    <!--        <i class="iconfont icon-xihuan"></i><span>很高兴遇见你,{{ user.userName }}。</span>-->
    <!--      </div>-->
    <!--    </section>-->
  </div>

</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      user: { //用户信息
        userName: null,
        userId: null
      },
      pagination: {
        //分页后的考试信息
        current: 1, //当前页//记录条数
        size: 9999 //每页条数
      },
      paginations: {},
      paginationage: {},
      option: {
        title: {
          text: '题库数量变化'
        },
        color: '#000',
        // tooltip: {
        //   trigger: 'axis'
        // },
        // legend: {
        //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        // },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          }
        ]
      }
    }
  },
  created() {
    this.getUserInfo()
    this.getInfo()
  },
  mounted() {
    var myChart = echarts.init(document.getElementById('main'))
    myChart.setOption(this.option)
  },
  methods: {
    getUserInfo() { //获取用户信息
      let userName = this.$cookies.get('cname')
      let userId = this.$cookies.get('cid')
      this.user.userName = userName
      this.user.userId = userId
    },
    getInfo() {
      //分页查询所有试卷信息
      this.$axios(`/api/teachers/${this.pagination.current}/${this.pagination.size}`).then(res => {
        this.pagination = res.data.data
      }).catch(error => {
      })
      this.$axios(`/api/students/${this.pagination.current}/${this.pagination.size}`).then(res => {
        this.paginations = res.data.data
      }).catch(error => {
      })
      this.$axios({
        url: '/api/answers',
        method: 'post',
        data: {
          ...this.pagination
        }
      }).then(res => {
        this.paginationage = res.data.data
        // console.log(this.paginationage)
      }).catch(error => {
      })
    }
  }
}
</script>


<style lang='scss' scoped>
.index {
  margin-left: 70px;

  .hello {
    font-size: 20px;
    color: #726f70;

    .icon-xihuan {
      font-size: 30px;
      color: #dd6572;
    }
  }

  .msg {
    .title {
      font-size: 16px;
      color: #000;
      margin-top: 20px;
      margin-left: 10px;
    }

    ul {
      display: flex;
      flex-direction: column;
      width: 200px;
      overflow: hidden;
    }

    li {
      margin-top: 10px;
      font-size: 14px;
      color: lightcoral;
      cursor: pointer;
      display: inline-block;
    }
  }
}
</style>

